<section id="widget-grid" class="">
	<div class="row">
		<article class="col-sm-12 col-md-12 col-lg-6">
			<div class="jarviswidget jarviswidget-color-blueDark" id="wid-id-1" data-widget-editbutton="false" data-widget-colorbutton="false">
				<header>
					<span class="widget-icon"><i class="fa fa-check txt-color-white"></i></span>
					<h2>待办事项</h2>
				</header>
				<div style="height:482px;">
					<div class="widget-body no-padding smart-form" id="">
						<!-- content goes here -->
						<h5 class="todo-group-title">
							<i class="fa fa-inbox"></i> 收件箱(<small class="num-of-tasks">0</small>)
						</h5>
						
						<ul id="sortable1" class="todo">
							<li><span class="handle"><i class="fa fa-angle-double-right fa-2x"></i></span>
								<p>
									<strong>暂无未读邮件</strong> 
								</p>
							</li>
							<!-- 
							<li><span class="handle"><i class="fa fa-angle-double-right fa-2x"></i></span>
								<p>
									<strong>用户A</strong> - 测试邮件 
									[<a href="javascript:void(0);" class="font-xs">更多详情</a>] 
									<span class="date">2014年6月1号</span>
								</p>
							</li>
							<li><span class="handle"><i class="fa fa-angle-double-right fa-2x"></i></span>
								<p>
									<strong>用户A</strong> - 测试邮件 
									[<a href="javascript:void(0);" class="font-xs">更多详情</a>] 
									<span class="date">2014年6月1号</span>
								</p>
							</li>
							-->
						</ul>
						
						<h5 class="todo-group-title">
							<i class="fa fa-check-square-o"></i> 待审批列表(<small class="num-of-tasks">0</small>)
						</h5>
						
						<ul id="sortable2" class="todo">
							<li><span class="handle"><i class="fa fa-angle-double-right fa-2x"></i></span>
								<p>
									<strong>暂无待审批项</strong>
								</p>
							</li>
							<!-- 
							<li><span class="handle"><i class="fa fa-angle-double-right fa-2x"></i></span>
								<p>
									<strong>业务审批</strong> - 关于XXX的申请: 
									[<a href="javascript:void(0);" class="font-xs">更多详情</a>] 
									<span class="date">2014年6月1号</span>
								</p>
							</li>
							<li><span class="handle"><i class="fa fa-angle-double-right fa-2x"></i></span>
								<p>
									<strong>业务审批</strong> - 关于XXX的申请: 
									[<a href="javascript:void(0);" class="font-xs">更多详情</a>] 
									<span class="date">2014年6月1号</span>
								</p>
							</li>
							<li><span class="handle"><i class="fa fa-angle-double-right fa-2x"></i></span>
								<p>
									<strong>业务审批</strong> - 关于XXX的申请: 
									[<a href="javascript:void(0);" class="font-xs">更多详情</a>] 
									<span class="date">2014年6月1号</span>
								</p>
							</li>
							<li><span class="handle"><i class="fa fa-angle-double-right fa-2x"></i></span>
								<p>
									<strong>业务审批</strong> - 关于XXX的申请: 
									[<a href="javascript:void(0);" class="font-xs">更多详情</a>] 
									<span class="date">2014年6月1号</span>
								</p>
							</li>
							 -->
						</ul>
						
					</div>
				</div>

			</div>
			
			<div class="jarviswidget jarviswidget-color-blueDark" id="wid-id-2"
				data-widget-editbutton="false" data-widget-colorbutton="false">
				<header>
					<span class="widget-icon"><i class="fa fa-bar-chart-o txt-color-white"></i></span>
					<h2>自定义组件</h2>
				</header>
				<div style="height:221px;">
					
				</div>
			</div>

		</article>

		<article class="col-sm-12 col-md-12 col-lg-6">
			<div class="jarviswidget jarviswidget-color-blueDark" id="wid-id-3"
				data-widget-editbutton="false" data-widget-colorbutton="false">
				<header>
					<span class="widget-icon"><i
						class="fa fa-newspaper-o txt-color-white"></i></span>
					<h2>通知公告</h2>
				</header>
				<div class="tab-content padding-top-10" id="notice_list_panel">
					
				</div>
			</div>

			<div class="jarviswidget jarviswidget-color-blueDark" id="wid-id-4"
				data-widget-colorbutton="false" data-widget-editbutton="false" >
				<header>
					<span class="widget-icon"><i class="fa fa-calendar"></i></span>
					<h2>日历</h2>
					<div class="widget-toolbar ">
						<!-- add: non-hidden - to disable auto hide -->
						<div class="btn-group">
							<button class="btn dropdown-toggle btn-xs btn-default"
								data-toggle="dropdown">
								显示 <i class="fa fa-caret-down"></i>
							</button>
							<ul class="dropdown-menu js-status-update pull-right">
								<li><a href="javascript:void(0);" id="mt">星期</a></li>
								<li><a href="javascript:void(0);" id="ag">日程</a></li>
								<li><a href="javascript:void(0);" id="td">今天</a></li>
							</ul>
						</div>

					</div>
					<!-- end jarvisWidgetToolbar -->

				</header>
				<div>
					<div class="jarviswidget-editbox">
						<input type="text" class="form-control">

					</div>
					<div class="widget-body no-padding" id="">
						<div class="widget-body-toolbar " id="">
							<div id="calendar-buttons">

								<div class="btn-group">
									<a href="javascript:void(0)" class="btn btn-default btn-xs"
										id="btn-prev"><i class="fa fa-chevron-left"></i> </a> <a
										href="javascript:void(0)" class="btn btn-default btn-xs"
										id="btn-next"><i class="fa fa-chevron-right"></i> </a>
								</div>
							</div>

						</div>
						<div id="calendar"></div>

					</div>
					<!-- end widgetContent -->

				</div>
				<!-- end jarvisWidgetBody -->

			</div>
			<!-- end widget -->
			<!-- end jarvisWidget -->

		</article>


	</div>
	<!-- end widgetGridRow -->

</section>
<!-- end widgetGrid -->

<script id="notice_list_tpl" type="text/html">
<div class="tab-pane fade in active " id="a1">
	{{each list as value i}}
	<div class="row ">
		<div class="col-xs-2 col-sm-1">
			<time datetime="{{value.createTime}}" class="icon">
				<strong>{{value.month}}月</strong> <span>{{value.day}}</span>
			</time>
		</div>
		<div class="col-xs-10 col-sm-11">
			<h6 class="no-margin">
				<a href="javascript:Notify.OpenView('{{value.id}}');">{{value.title}}</a>
			</h6>
			<p style="height:54px;">
				{{value.content}}
			</p>
		</div>
		<div class="col-sm-12 ">
			<hr>
		</div>
	</div>
	{{/each}}
</div>
</script>

<script id="notify_view_tpl" type="text/html">
	<form action="" id="notify-form" class="smart-form" novalidate="novalidate" style="overflow-x: hidden;" onsubmit="return false;">
		<fieldset>
			<div class="row">
				<section class="col col-2 ">
					<label class="label col col-12">公告标题：</label>
				</section>
				<section class="col col-10 ">
					<label class="input"> 
						<lable id="title" name="title" class="label col col-12">{{title}}</label>
						<input type="hidden" id="id" name="id" value="{{id}}">
					</label>
				</section>
			</div>
			
			<div class="row">
				<section class="col col-2 ">
					<label class="label col col-12">公告内容：</label>
				</section>
				<section class="col col-10 ">
					<label class="label col col-12" style="height:240px; overflow:auto;">
						{{content}}
					</label>
				</section>
			</div>

		</fieldset>

		<footer>
			<button type="button" class="btn btn-primary"onClick="layer.close(layer.index);">关闭</button>
		</footer>
	</form>
</script>

<script src="js/module/msg/notify.js"></script>

<script src="js/sys/platform.js"></script>
<script type="text/javascript">
	$(document).ready(function(){ 
		Platform.NoticeList();
	
		pageSetUp();	
	});
	
	var pagefunction = function() {
			
		
		
		/*
		 * FULL CALENDAR JS
		 */
		
		// Load Calendar dependency then setup calendar
		loadScript("js/plugin/fullcalendar/jquery.fullcalendar.min.js", setupCalendar);
		
		function setupCalendar() {
		
		    if ($("#calendar").length) {
		        var date = new Date();
		        var d = date.getDate();
		        var m = date.getMonth();
		        var y = date.getFullYear();
		
		        var calendar = $('#calendar').fullCalendar({
		
		            editable: true,
		            draggable: true,
		            selectable: false,
		            selectHelper: true,
		            unselectAuto: false,
		            disableResizing: false,
		
		            header: {
		                left: 'title', //,today
		                center: 'prev, next, today',
		                right: 'month, agendaWeek, agenDay' //month, agendaDay,
		            },
		
		            select: function (start, end, allDay) {
		                var title = prompt('Event Title:');
		                if (title) {
		                    calendar.fullCalendar('renderEvent', {
		                            title: title,
		                            start: start,
		                            end: end,
		                            allDay: allDay
		                        }, true // make the event "stick"
		                    );
		                }
		                calendar.fullCalendar('unselect');
		            },
		
		            events: [],
		
		            eventRender: function (event, element, icon) {
		                if (!event.description == "") {
		                    element.find('.fc-event-title').append("<br/><span class='ultra-light'>" + event.description +
		                        "</span>");
		                }
		                if (!event.icon == "") {
		                    element.find('.fc-event-title').append("<i class='air air-top-right fa " + event.icon +
		                        " '></i>");
		                }
		            }
		        });
		
		    };
		
		    /* hide default buttons */
		    $('.fc-header-right, .fc-header-center').hide();
		
		}
		
		// calendar prev
		$('#calendar-buttons #btn-prev').click(function () {
		    $('.fc-button-prev').click();
		    return false;
		});
		
		// calendar next
		$('#calendar-buttons #btn-next').click(function () {
		    $('.fc-button-next').click();
		    return false;
		});
		
		// calendar today
		$('#calendar-buttons #btn-today').click(function () {
		    $('.fc-button-today').click();
		    return false;
		});
		
		// calendar month
		$('#mt').click(function () {
		    $('#calendar').fullCalendar('changeView', 'month');
		});
		
		// calendar agenda week
		$('#ag').click(function () {
		    $('#calendar').fullCalendar('changeView', 'agendaWeek');
		});
		
		// calendar agenda day
		$('#td').click(function () {
		    $('#calendar').fullCalendar('changeView', 'agendaDay');
		});
		
	}
	pagefunction();
	
	
</script>